import { Button } from "antd";
import Wrapper from "./style";
import blank from "@/static/imgs/courseContent/blank.png";
import { CSSProperties } from "react";

const Directory = () => {
  const bt1:CSSProperties = {
    background:'#ecf3fe',
    color:'#4285f4',
    borderColor:'#b3cefb'
  }
  const bt2:CSSProperties = {
    background:'#689df6',
    color:'#fff',
    borderColor:'#689df6',
    marginRight:'16px',
    marginLeft:'16px'
  }
  const bt3:CSSProperties = {
    background:'#00ca90',
    color:'#fff',
    borderColor:'#00ca90'
  }
  return (
    <Wrapper>
      <div className="directory">
        <div className="top flex">
          <div className="top-left flex">
            <div>共</div>
            <div>0</div>
            <div>个章节</div>
            <div>0</div>
            <div>个活动</div>
          </div>
          <div className="top-right">
            <Button style={bt1}>编辑排序</Button>
            <Button style={bt2}>+添加章节</Button>
            <Button style={bt3}>+添加内容</Button>
          </div>
        </div>

        <div className="container">
          <div className="blank flex">
            <img className="blank-img" src={blank} alt="" />
            <div>暂未创建章节，试试引用一下优秀的章节目录吧</div>
          </div>
        </div>
      </div>
    </Wrapper>
  );
};
export default Directory;
